<template>

	<view class='body'>
		<view class='container'>
			<image class='logo' src="/static/logo.png"></image>
			<view>
				<view class='input-wrapper'>
					<image class='input-icon' src="/static/images/new/icon-phone.png" mode='aspectFit'></image>
					<input class='input' placeholder-style='color:#D9D9D9' type='number' placeholder='输入手机号' @input='phoneInput'></input>
					<text class='input-btn' style='color:#FF6C64;' @tap='get_code'>{{data.codeShow ? '获取验证码':('重新获取(' + data.codeTick + ')')}}</text>
				</view>
				<view class='input-wrapper'>
					<image class='input-icon' src='/static/images/new/icon-password.png' mode='aspectFit'></image>
					<input class='input code-input' placeholder-style='color:#D9D9D9' type='number' placeholder='输入验证码' @input='codeInput'></input>
				</view>
				<view class='login-btn' @tap='login'>登录</view>
			</view>

		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
					codeTick: '',
					codeShow: true,
					timer: null,
					phone: '',
					code: '',
					hotelInfo: {},
					isPhone: false
				},
			}
		},
		onLoad: function() {myVue = this;

		},

		methods: {
			isPhoneAvailable: function(str) {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			get_code() {
				var that = this
				if (that.data.codeShow == true) {
					if (that.data.isPhone) {
						var params = {
							phone: that.data.phone
						}
						uni.request({
							url: myVue.getApp.api.new.get_sms_code,
							data: params,
							method: 'GET',
							success:function(e){
								if(e.data.code==1){
									myVue.getApp.core.showToast({
										title: e.data.msg,
										icon: "none"
									})
								}
							}
						})
						that.countDown()
					} else {
						myVue.getApp.core.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
					}
				}
			},
			phoneInput(e) {
				var that = this;
				var val = e.detail.value
				if (that.isPhoneAvailable(val)) {
					this.setData({
						phone: e.detail.value,
						isPhone: true
					})
				} else {
					this.setData({
						isPhone: false
					})
				}
			},
			codeInput(e) {
				this.setData({
					code: e.detail.value
				})
			},
			login() {
				var that = this
				var params = {
					code: that.data.code,
					phone: that.data.phone
				}
				if (that.data.isPhone) {
					uni.request({
						url: myVue.getApp.api.new.code_login,
						method: "POST",
						data: params,
						header: {
							"content-type": "application/x-www-form-urlencoded"
						},
						success:function(e){
							console.log(e)
							if(e.data.code == 0){
								myVue.getApp.core.reLaunch({url:'/pages/index/index'}),
								myVue.getApp.core.setStorageSync(that.getApp.const.ACCESS_TOKEN, e.data.data.access_token),
								uni.request({
									url: myVue.getApp.api.user.index,
									data: {
										access_token: e.data.data.access_token
									},
									success:function(res){
										myVue.getApp.core.setStorageSync(myVue.getApp.const.USER_INFO,res.data.data.user_info)
										myVue.getApp.getDappData()
									}
								});
							}else{
								uni.showToast({
									title: e.data.msg,
									icon: "none"
								})
							}
						}
					})
				} else if (!that.data.isPhone) {
					myVue.getApp.core.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}
			},
			// 倒计时
			countDown() {
				var that = this
				const TIME_COUNT = 60;
				if (!that.data.timer) {
					that.setData({
						codeTick: TIME_COUNT,
						codeShow: false
					})
					that.data.timer = setInterval(function() {
						if (that.data.codeTick > 0 && that.data.codeTick <= TIME_COUNT) {
							that.setData({
								codeTick: that.data.codeTick - 1
							})
						} else {
							that.setData({
								codeShow: true
							})
							clearInterval(that.data.timer);
							that.setData({
								timer: null
							})
						}
					}, 1000)
				}
			}
		}


	}
</script>

<style scoped>
	page{
		background: linear-gradient(-27deg, rgba(255, 108, 100, 1), rgba(248, 114, 107, 1));
	}
	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 200upx;
	}
	
	.container {
		width: 690upx;
		background-color: #fff;
		position: relative;
		margin-top: 224upx;
		text-align: center;
		border-radius: 10upx;
	}

	.logo {
		width: 177upx;
		height: 177upx;
		border-radius: 177upx;
		margin-top: -80upx;
		margin-bottom: 102upx;
	}

	.input-wrapper {
		/* width: 690upx; */
		height: 90upx;
		margin-bottom: 30upx;
		padding: 0 20upx;
		box-sizing: border-box;
		border-radius: 10upx;
		background-color: rgba(255, 255, 255, 0.3);
		display: flex;
		align-items: center;
		margin-left: 88upx;
		margin-right: 66upx;
		border-bottom: 1upx solid #eee;
	}


	.input-icon {
		width: 44upx;
		height: 44upx;
		margin-right: 10upx;
	}

	.input {
		font-size: 32upx;
		background-color: transparent;
		color: #333333;
		padding: 0 10upx;
	}

	.code-input {
		width: 500upx;
		margin-left: -130upx;
	}

	.input-btn {
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		color: #F5F5F5;
		flex-shrink: 0;
	}

	.login-btn {
		width: 426upx;
		height: 88upx;
		border-radius: 44upx;
		border: 2upx solid #FF6C64;
		font-size: 34upx;
		color: #FF6C64;
		line-height: 90upx;
		text-align: center;
		box-sizing: border-box;
		margin-top: 150upx;
		margin-bottom: 138upx;
		margin-left: 132upx;
	}
</style>
